<template>
  <div class="method">
    <Top :title="headTitle" iconShow='1'></Top>
    <div class="method-content">
      <div class="method-content-item" v-for="(item,idx) in methodList" :key="idx" @click="goDetail(item.id)">
        <div class="method-content-item-top">
          <p>{{item.title}}</p>
          <span>{{item.detail}}</span>
        </div>
        <div class="method-content-item-bottom">
          <span>{{item.author}}</span>
          <span>{{item.create_time | formatDate1}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import Foot from 'components/Footer/Footer'
import { MessageBox,Indicator } from 'mint-ui';

export default {
  name: 'method',
  components: { Top,Foot },
  data() {
    return {
      methodList: [],
      headTitle: ''
    }
  },
  filters: {
    formatDate1(time) {
      return commons. formatDate1(time);
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    var index = commons.getParameter('indexa');
    if (index == 1) {
      // document.setTitle('行业资讯');
      this.headTitle = '行业资讯'
    } else if (index == 2) {
      // document.setTitle('贷款知识');
      this.headTitle = '贷款知识'
    } else if (index == 3) {
      // document.setTitle('用卡常识');
      this.headTitle = '用卡常识'
    } else {
      // document.setTitle('防骗课堂');
      this.headTitle = '防骗课堂'
    }
    // 调用提额妙招列表接口
    this.$http.get('/loansupermarket-app/information/getInformationBranchList?type=' + index+'&pageSize='+100).then(function(response) {
      var resBody = response.body;
      if (resBody.code == '000') {
        this.methodList = resBody.data;
        this.methodList.forEach(function(item, index) {
          // 时间戳转时间格式
          // item.create_time = dateFormat(item.create_time, 'YYYY-MM-DD HH:mm:ss');
        })
      } else {
        MessageBox.alert(resBody.mesg, '提示');
      }
    })
  },
  methods: {
    // 跳转到相应的详情页面
    goDetail(id) {
      window.location.href = './article.html?id='+id;
    }  
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.method {
  text-align: center;
  &-content {
    margin-top: 1.2rem;
    &-item {
      box-sizing: border-box;
      margin-bottom: 0.28rem;
      padding-left: 0.4rem;
      width: 100%;
      height: 3rem;
      background: #fff;
      &-top {
        text-align: left;
        height: 1.9rem;
        border-bottom: 1px solid #e4e4e4;
        p {
          font-size: 0.4rem;
          height: 1.16rem;
          line-height: 1.16rem;
        }
        span {
          font-size: 0.34rem;
          color: #959595;
        }
      }
      &-bottom {
        line-height: 1.1rem;
        box-sizing: border-box;
        padding-right: 0.4rem;
        span:nth-of-type(1) {
          float: left;
          font-size: 0.3rem;
        }
        span:nth-of-type(2) {
          float: right;
          font-size: 0.25rem;
          color: #959595;
        }
      }
    }
  }
}

</style>
